<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RPG游戏上层界面</title>
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <!-- 左上角控制按钮区域 -->
    <div class="control-panel">
        <button class="control-btn" id="btnCharacter">角色</button>
        <button class="control-btn" id="btnBackpack">背包</button>
        <button class="control-btn" id="btnRank">排行</button>
        <button class="control-btn" id="btnCard">卡片</button>
    </div>

    <!-- 透明遮罩层 -->
    <div class="overlay-layer" id="overlayLayer">
        <!-- 人物信息面板 -->
        <div class="modal-panel" id="characterPanel">
            <div class="panel-content">
                <div class="panel-header">
                    <h2>角色信息</h2>
                    <button class="close-btn" id="closeCharacter">×</button>
                </div>
                <div class="panel-body">
                    <div class="character-info">
                        <div class="avatar-section">
                            <div class="avatar">头像</div>
                            <div class="character-name">玩家姓名</div>
                            <div class="character-level">等级: 50</div>
                        </div>
                        <div class="stats-section">
                            <div class="stat-item">
                                <span class="stat-label">生命值</span>
                                <div class="stat-bar">
                                    <div class="stat-fill" style="width: 85%"></div>
                                </div>
                                <span class="stat-value">850/1000</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">魔法值</span>
                                <div class="stat-bar magic">
                                    <div class="stat-fill" style="width: 60%"></div>
                                </div>
                                <span class="stat-value">600/1000</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">经验值</span>
                                <div class="stat-bar exp">
                                    <div class="stat-fill" style="width: 45%"></div>
                                </div>
                                <span class="stat-value">4500/10000</span>
                            </div>
                        </div>
                    </div>
                    <div class="attributes-grid">
                        <div class="attribute-item">
                            <span class="attr-icon">⚔️</span>
                            <span class="attr-label">攻击力</span>
                            <span class="attr-value">250</span>
                        </div>
                        <div class="attribute-item">
                            <span class="attr-icon">🛡️</span>
                            <span class="attr-label">防御力</span>
                            <span class="attr-value">180</span>
                        </div>
                        <div class="attribute-item">
                            <span class="attr-icon">💨</span>
                            <span class="attr-label">敏捷</span>
                            <span class="attr-value">120</span>
                        </div>
                        <div class="attribute-item">
                            <span class="attr-icon">✨</span>
                            <span class="attr-label">幸运</span>
                            <span class="attr-value">88</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 背包面板 -->
        <div class="modal-panel" id="backpackPanel">
            <div class="panel-content backpack-content">
                <div class="panel-header">
                    <h2>背包</h2>
                    <button class="close-btn" id="closeBackpack">×</button>
                </div>
                <div class="panel-body">
                    <div class="backpack-grid">
                        <div class="item-slot">物品1</div>
                        <div class="item-slot">物品2</div>
                        <div class="item-slot">物品3</div>
                        <div class="item-slot">物品4</div>
                        <div class="item-slot">物品5</div>
                        <div class="item-slot">物品6</div>
                        <div class="item-slot">物品7</div>
                        <div class="item-slot">物品8</div>
                        <div class="item-slot">物品9</div>
                        <div class="item-slot">物品10</div>
                        <div class="item-slot">物品11</div>
                        <div class="item-slot">物品12</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 排行榜面板 -->
        <div class="modal-panel" id="rankPanel">
            <div class="panel-content rank-content">
                <div class="panel-header">
                    <h2>排行榜</h2>
                    <button class="close-btn" id="closeRank">×</button>
                </div>
                <div class="panel-body">
                    <div class="rank-list">
                        <div class="rank-item gold">
                            <div class="rank-number">1</div>
                            <div class="rank-avatar">👤</div>
                            <div class="rank-info">
                                <div class="rank-name">第一名玩家</div>
                                <div class="rank-level">等级: 100</div>
                            </div>
                            <div class="rank-score">10000</div>
                        </div>
                        <div class="rank-item silver">
                            <div class="rank-number">2</div>
                            <div class="rank-avatar">👤</div>
                            <div class="rank-info">
                                <div class="rank-name">第二名玩家</div>
                                <div class="rank-level">等级: 95</div>
                            </div>
                            <div class="rank-score">9500</div>
                        </div>
                        <div class="rank-item bronze">
                            <div class="rank-number">3</div>
                            <div class="rank-avatar">👤</div>
                            <div class="rank-info">
                                <div class="rank-name">第三名玩家</div>
                                <div class="rank-level">等级: 90</div>
                            </div>
                            <div class="rank-score">9000</div>
                        </div>
                        <div class="rank-item">
                            <div class="rank-number">4</div>
                            <div class="rank-avatar">👤</div>
                            <div class="rank-info">
                                <div class="rank-name">第四名玩家</div>
                                <div class="rank-level">等级: 88</div>
                            </div>
                            <div class="rank-score">8800</div>
                        </div>
                        <div class="rank-item">
                            <div class="rank-number">5</div>
                            <div class="rank-avatar">👤</div>
                            <div class="rank-info">
                                <div class="rank-name">第五名玩家</div>
                                <div class="rank-level">等级: 85</div>
                            </div>
                            <div class="rank-score">8500</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 获得卡片特效面板 -->
        <div class="modal-panel card-effect-panel" id="cardPanel">
            <div class="panel-content card-content">
                <div class="card-effect-container">
                    <div class="card-glow"></div>
                    <div class="card-item">
                        <div class="card-header">
                            <span class="card-title">获得新卡片！</span>
                            <button class="close-btn" id="closeCard">×</button>
                        </div>
                        <div class="card-image">🃏</div>
                        <div class="card-name">传奇卡牌</div>
                        <div class="card-description">这是一张非常稀有的传奇卡牌，拥有强大的特殊能力。</div>
                        <div class="card-stats">
                            <div class="card-stat">
                                <span>攻击:</span>
                                <strong>999</strong>
                            </div>
                            <div class="card-stat">
                                <span>防御:</span>
                                <strong>888</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="scripts/main.js"></script>
</body>
</html>
